<template>
  <div>
    <aside class="w-64 bg-white shadow-md h-screen fixed left-0 top-0 overflow-y-auto">
      <div class="p-5 border-b">
        <h2 class="text-xl font-bold text-blue-600" style="font-size: 16px">就业信息系统(单位端)</h2>
      </div>
      <nav class="p-4">
        <ul class="space-y-2">
          <li class="hover:bg-blue-50 rounded">
            <router-link to="/dw/index">
              <a class="flex items-center p-2 text-gray-700">
                <i class="fas fa-tachometer-alt mr-2"></i>
                总览
              </a>
            </router-link>
          </li>

          <li class="hover:bg-blue-50 rounded">
            <router-link to="/dw/job">
              <a class="flex items-center p-2 text-gray-700 w-full justify-between">
                <span class="flex items-center">
                    <i class="fas fa-briefcase mr-2"></i> 管理岗位
                </span>
                <span v-if="dataCount.GWS > 0" class="badge">{{ dataCount.GWS }}</span>
              </a>
            </router-link>
          </li>


          <li class="hover:bg-blue-50 rounded">
            <router-link to="/dw/dwxxgl">
              <a class="flex items-center p-2 text-gray-700">
                <i class="fas fa-briefcase mr-2"></i>
                单位信息管理
              </a>
            </router-link>
          </li>

          <li @click="toggleStatsMenu" class="hover:bg-blue-50 rounded cursor-pointer">
            <a class="flex items-center p-2 text-gray-700">
              <i class="fas fa-chart-pie mr-2"></i>
              岗位管理
              <i :class="{'fas fa-chevron-down': !isStatsMenuQiTaOpen, 'fas fa-chevron-up': isStatsMenuQiTaOpen}" class="ml-auto"></i>
            </a>
          </li>

          <ul v-show="isStatsMenuQiTaOpen" class="pl-4 space-y-2">
            <li class="hover:bg-blue-50 rounded">
              <router-link to="/dw/addJob">
                <a class="flex items-center p-2 text-gray-700">
                  岗位发布
                </a>
              </router-link>
            </li>

            <li class="hover:bg-blue-50 rounded">
              <router-link to="/dw/gwhjgl">
                <a class="flex items-center p-2 text-gray-700 w-full justify-between">
                <span class="flex items-center">
                   岗位环境管理
                </span>
                  <span v-if="dataCount.GWHJS > 0" class="badge">{{ dataCount.GWHJS }}</span>
                </a>
              </router-link>
            </li>

            <li class="hover:bg-blue-50 rounded">
              <router-link to="/dw/dshgw">
                <a class="flex items-center p-2 text-gray-700 w-full justify-between">
                <span class="flex items-center">
                   待审核岗位
                </span>
                  <span v-if="dataCount.DSHGWS > 0" class="badge">{{ dataCount.DSHGWS }}</span>
                </a>
              </router-link>
            </li>

            <li class="hover:bg-blue-50 rounded">
              <router-link to="/dw/noPassJob">
                <a class="flex items-center p-2 text-gray-700 w-full justify-between">
                <span class="flex items-center">
                   审核不通过
                </span>
                  <span v-if="dataCount.SHGWBTGS > 0" class="badge">{{ dataCount.SHGWBTGS }}</span>
                </a>
              </router-link>
            </li>

            <li class="hover:bg-blue-50 rounded">
              <router-link to="/company/statistics/hire">
                <a class="flex items-center p-2 text-gray-700">
                  岗位模版
                </a>
              </router-link>
            </li>
          </ul>

          <li class="hover:bg-blue-50 rounded">
            <router-link to="/dw/sqzmd">
              <a class="flex items-center p-2 text-gray-700 w-full justify-between">
                <span class="flex items-center">
                  <i class="fas fa-users mr-2"></i> 申请者名单
                </span>
                <span v-if="dataCount.TDJLS > 0" class="badge">{{ dataCount.TDJLS }}</span>
              </a>
            </router-link>
          </li>


          <li class="hover:bg-blue-50 rounded">
            <router-link to="/dw/msap">
              <a class="flex items-center p-2 text-gray-700 w-full justify-between">
                <span class="flex items-center">
                   <i class="fas fa-calendar-alt mr-2"> </i> 面试安排
                </span>
                <span v-if="dataCount.MSS > 0" class="badge">{{ dataCount.MSS }}</span>
              </a>
            </router-link>
          </li>

          <li class="hover:bg-blue-50 rounded">
            <router-link to="/dw/dwxxl">
              <a class="flex items-center p-2 text-gray-700 w-full justify-between">
                <span class="flex items-center">
                   <i class="fas fa-users mr-2"></i> 对话窗口
                </span>
                <span v-if="dataCount.LXRS > 0" class="badge">{{ dataCount.LXRS }}</span>
              </a>
            </router-link>
          </li>

          <li class="hover:bg-blue-50 rounded">
            <router-link to="/dw/zphsq">
              <a class="flex items-center p-2 text-gray-700">
                <i class="fas fa-calendar-check me-2"></i>
                招聘会申请
              </a>
            </router-link>
          </li>

          <li class="hover:bg-blue-50 rounded">
            <router-link to="/dw/zphsq">
              <a class="flex items-center p-2 text-gray-700 w-full justify-between">
                <span class="flex items-center">
                   <i class="fas fa-calendar-check me-2"></i> 招聘会申请
                </span>
                <span v-if="dataCount.ZPHS > 0" class="badge">{{ dataCount.ZPHS }}</span>
              </a>
            </router-link>
          </li>

          <li class="hover:bg-blue-50 rounded">
            <router-link to="/dw/zpgggl">
              <a class="flex items-center p-2 text-gray-700 w-full justify-between">
                <span class="flex items-center">
                    <i class="fas fa-users mr-2"></i> 公告管理
                </span>
                <span v-if="dataCount.ZPGGS > 0" class="badge">{{ dataCount.ZPGGS }}</span>
              </a>
            </router-link>
          </li>

          <li class="hover:bg-blue-50 rounded">
            <router-link to="/dw/dwjs">
              <a class="flex items-center p-2 text-gray-700">
                <i class="fas fa-users mr-2"></i>
                单位介绍
              </a>
            </router-link>
          </li>

          <li class="hover:bg-blue-50 rounded">
            <router-link to="/dw/zpjz">
              <a class="flex items-center p-2 text-gray-700 w-full justify-between">
                <span class="flex items-center">
                    <i class="fa-solid fa-bars mr-2"></i> 招聘简章
                </span>
                <span v-if="dataCount.ZPJZS > 0" class="badge">{{ dataCount.ZPJZS }}</span>
              </a>
            </router-link>
          </li>

          <li class="hover:bg-blue-50 rounded">
            <router-link to="/dw/AI">
              <a class="flex items-center p-2 text-gray-700">
                <i class="fas fa-users mr-2"></i>
                AI 筛选
              </a>
            </router-link>
          </li>
<!--          <li @click="toggleStatsMenu" class="hover:bg-blue-50 rounded cursor-pointer">
            <a class="flex items-center p-2 text-gray-700">
              <i class="fas fa-chart-pie mr-2"></i>
              招聘统计
              <i :class="{'fas fa-chevron-down': !isStatsMenuQiTaOpen, 'fas fa-chevron-up': isStatsMenuQiTaOpen}" class="ml-auto"></i>
            </a>
          </li>
          <ul v-show="isStatsMenuQiTaOpen" class="pl-4 space-y-2">
            <li class="hover:bg-blue-50 rounded">
              <router-link to="/company/statistics/applicants">
                <a class="flex items-center p-2 text-gray-700">
                  申请统计
                </a>
              </router-link>
            </li>
            <li class="hover:bg-blue-50 rounded">
              <router-link to="/company/statistics/interviews">
                <a class="flex items-center p-2 text-gray-700">
                  面试统计
                </a>
              </router-link>
            </li>
            <li class="hover:bg-blue-50 rounded">
              <router-link to="/company/statistics/hire">
                <a class="flex items-center p-2 text-gray-700">
                  招聘成功统计
                </a>
              </router-link>
            </li>
          </ul>-->


          <li class="hover:bg-blue-50 rounded" style="cursor: pointer">
            <router-link to="/dw/zhgl">
              <a  class="flex items-center p-2 text-gray-700">
                <i class="fas fa-cogs mr-2"></i>
                账号管理
              </a>
            </router-link>
          </li>
<!--          <li class="hover:bg-blue-50 rounded" style="cursor: pointer">
            <router-link to="/dw/xtqqview">
              <a  class="flex items-center p-2 text-gray-700">
                <i class="fas fa-question-circle mr-2"></i>
                系统请求
              </a>
            </router-link>
          </li>-->
          <li class="hover:bg-blue-50 rounded" style="cursor: pointer">
            <a @click="RedirectToHome" class="flex items-center p-2 text-gray-700" id="logout-button">
              <i class="fas fa-home mr-2"></i>
              返回首页
            </a>
          </li>
          <li class="hover:bg-blue-50 rounded" style="cursor: pointer">
            <a @click="LoginOutOK" class="flex items-center p-2 text-gray-700" id="logout-button">
              <i class="fas fa-sign-out-alt mr-2"></i>
              退出登录
            </a>
          </li>
        </ul>
      </nav>
    </aside>



    <div v-if="visible" class="popup-overlay" @click="closePopup">
      <div class="popup" @click.stop>
        <h2 class="popup-title">{{ title }}</h2>
        <p class="popup-message">{{ message }}</p>
        <button class="popup-button" @click="closePopup">关闭</button>
      </div>
    </div>

  </div>
</template>

<script>
import axios from "axios";
import {EventBus} from "@/event-bus";

export default {
  name: "DwMenu",
  data() {
    return {
      showModal: false,
      title: '',
      message: '',
      isShowData: false,
      visible: false,
      /*isStatsMenuQiTaOpen: false,*/
      isStatsMenuQiTaOpen: true, // 控制统计分析子菜单的展开状态
      isStatsMenuXiaoYuanOpen: true, // 控制校园信息管理子菜单的展开状态
      dataCount: {
        "XSJLS": -1,
        "GWS": -1,
        "ZPHS": -1,
        "TDJLS": -1,
        "MSS": -1,
        "ZPGGS": -1,
        "LXRS": -1,
        "GWHJS":-1,
        "DSHGWS":-1,
        "SHGWBTGS":-1,
        "ZPJZS":-1,
      },
      UserInfo: {
        id: '',
        name: '',
        role: '',
        username: '',
      },
    }
  },
  mounted() {
    this.getLoginUserInfo();
  },
  methods: {
    async getLoginUserInfo() {
      this.isLoading = true;
      try {
        const response = await axios.get('/user/checkSession');
        if (!response.data.result) {
          EventBus.$emit('show-auth-popup');
          setTimeout(() => {
            this.$router.push({name: 'DwLoginView'});
          }, 1000);
        } else {
          console.log('登录成功-----！');
          this.UserInfo.name = response.data.name;
          this.UserInfo.role = response.data.role;
          this.UserInfo.username = response.data.username;
          this.getParams();
        }
      } catch (error) {
        EventBus.$emit('show-auth-popup');
        console.error('获取用户信息失败,网络错误！', error);
        setTimeout(() => {
          this.$router.push({name: 'DwLoginView'});
        }, 1000);
      }
    },
    // 获取参数： 单位端菜单否显示数据
    getParams() {
      axios.post('/config/getSemsConfigByIds',
          [23] ,
          { headers: { 'Content-Type': 'application/json' } }
      ).then(response => {
        this.isShowData = response.data.find(item => item.id === 23).value==="是";
        if(this.isShowData){
          this.getData();
        };
      }).catch(error => {
        this.$message.error('获取配置信息失败，请联系管理员');
      });
    },
    getData(){
      // 获取系统数量
      axios.get("/data/getSystemDataCount",{params:{YHM:this.UserInfo.username,YHSFDM:3}}).then(res => {
        if (res.data.result) {
          /*"XSJLS": -1,
              "GWS": -1,
              "ZPHS": -1,
              "TDJLS": -1,
              "MSS": -1,
              "ZPGGS": -1,
              "LXRS": -1,*/
          this.dataCount.XSJLS = res.data.data.XSJLS;
          this.dataCount.GWS = res.data.data.GWS;
          this.dataCount.ZPHS = res.data.data.ZPHS;
          this.dataCount.TDJLS = res.data.data.TDJLS;
          this.dataCount.MSS = res.data.data.MSS;
          this.dataCount.ZPGGS = res.data.data.ZPGGS;
          this.dataCount.LXRS = res.data.data.LXRS;
          this.dataCount.GWHJS = res.data.data.GWHJS;
          this.dataCount.DSHGWS = res.data.data.DSHGWS;
          this.dataCount.SHGWBTGS = res.data.data.SHGWBTGS;
          this.dataCount.ZPJZS = res.data.data.ZPJZS;
        } else {
          this.$message.error("获取系统数量失败:"+res.data.msg);
        }
      }).catch(err => {
        this.$message.error("获取系统数量失败！:"+err.message);
      });
    },
    toggleStatsMenu() {
      this.isStatsMenuQiTaOpen = !this.isStatsMenuQiTaOpen; // 切换子菜单的展开状态
    },
    toggleStatsMenuXiaoYuanOpen() {
      this.isStatsMenuXiaoYuanOpen = !this.isStatsMenuXiaoYuanOpen; // 切换子菜单的展开状态
    },
    confirmLogout() {
      axios.get("/user/logout").then((response) => {
        if (response.data.result) {
          this.$router.push({name: 'DwLoginView'});
        } else {
          this.title = '错误';
          this.message = '退出登录失败，请稍后再试';
          this.visible = true;
        }
      }).catch((error) => {
        console.log(error);
        this.title = '错误';
        this.message = '退出登录失败，请稍后再试';
        this.visible = true;
      });
      this.showModal = false;
    },
    closePopup() {
      this.visible = false;
      this.$router.push({name: 'Login'});
    },
    RedirectToHome() {
      this.$router.push({name: 'index'});
    },
    LoginOutOK() {
      $.confirm({
        title: '提示',
        content: '确认退出登录吗！',
        type: 'orange', // warning 样式
        buttons: {
          确定: {
            btnClass: 'btn-orange',
            action:  ()=> {
              axios.get("/user/logout").then((response) => {
                if (response.data.result) {
                  this.$router.push({name: 'DwLoginView'});
                } else {
                  this.title = '错误';
                  this.message = '退出登录失败，请稍后再试';
                  this.visible = true;
                }
              }).catch((error) => {
                console.log(error);
                this.title = '错误';
                this.message = '退出登录失败，请稍后再试';
                this.visible = true;
              });
            }
          },
          取消:  ()=> {

          }
        }
      });
    }
  }
}
</script>

<style>
.badge {
  background-color: #f4f2f2; /* Tailwind 的 red-500 */
  color: black;
  font-size: 0.75rem; /* text-xs */
  font-weight: 600;
  border-radius: 9999px; /* full */
  padding: 0.25rem 0.5rem;
  margin-left: auto;
  line-height: 1;
  display: inline-block;
  min-width: 1.5rem;
  text-align: center;
  box-shadow: 0 0 0 2px white;
  transition: all 0.2s ease-in-out;
}

/* 增强弹窗体验的样式 */
.fixed {
  position: fixed;
}

.flex {
  display: flex;
}

.hidden {
  display: none;
}

.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99999;
  transition: opacity 0.3s ease;
}

.popup {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  padding: 20px;
  max-width: 400px;
  width: 90%;
  text-align: center;
  animation: fadeIn 0.3s;
}

.popup-title {
  margin: 0 0 10px;
  font-size: 1.5em;
  font-weight: bold;
  color: #333;
}

.popup-message {
  margin-bottom: 20px;
  font-size: 1em;
  color: #666;
}

.popup-button {
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  cursor: pointer;
  font-size: 1em;
  transition: background-color 0.3s;
}

.popup-button:hover {
  background-color: #0056b3;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/*--------------信息弹窗-样式end*/
</style>
